<template>
  <div class="main">
    <div class="content-w3ls" style="margin-top: 70px">
      <div class="content1-agile" style="margin-top:70px">
        <div class="info-w3l" >
          <h2 class="wthree">Recruit</h2>
            <input v-model="account" id="username" name="username" placeholder="">
            <input v-model="password" id="email" name="email" placeholder="">
            <!--          <textarea v-model="message" id="message" name="message" placeholder="Your Message"
                                title="Please enter Your Comments"></textarea>-->
            <input class="sign-in" type="submit" value="登录" @click="login">
          <p class="agileinfo">Or</p>
          <ul class="social-w3-agileits"  style="display: inline-block;margin-left: 132px">
            <i class="el-icon-user-solid" style="font-size: 36px;" title="用户注册" @click="registerUser"></i>
          </ul>
          <ul class="social-w3-agileits"  style="display: inline-block;margin-left: 100px">
            <i class="el-icon-s-shop" style="font-size: 36px;" title="公司注册" @click="registerCompany"></i>
          </ul>
        </div>
      </div>
      <div class="content2-agile">

      </div>
      <div class="clear"></div>
    </div>
    <el-dialog
        :visible.sync="CompanyVisible"
        width="800px"
        style="margin-top: -100px"
    >
      <div class="form-grid-container">
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="公司名称">
            <el-input v-model="form.name" style="width: 300px;"></el-input>
          </el-form-item>

          <el-form-item label="企业规模">
            <el-select v-model="form.size" placeholder="请选择">
              <el-option
                  v-for="item in sizeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="公司介绍">
            <el-input type="textarea" v-model="form.description" style="width: 500px;"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱">
            <el-input v-model="form.email" style="width: 200px;"></el-input>
          </el-form-item>

          <el-form-item label="企业商标">
            <el-upload
                class="upload - demo"
                action="/api/file/uploadPicture"
                :on-success="handleSuccessbrand"
                :auto-upload="true">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <img v-if="form.brand" :src="form.brand" style="width: 100px; height: 50px; object-fit: cover;">
          </el-form-item>
          <el-form-item label="营业执照">
            <el-upload
                class="upload - demo"
                action="/api/file/uploadPicture"
                :on-success="handleSuccesslicence"
                :auto-upload="true">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <img v-if="form.license" :src="form.license" style="width: 100px; height: 50px; object-fit: cover;">
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立刻注册</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import "@/assets/login/css/style.css";
import axios from "axios";
import pubsub from "pubsub-js";

export default {
  data() {
    return {
      CompanyVisible: false,
      account: '',
      password: '',
      form: {
        name: '',
        size:'',
        description:'',
        license:'',
        brand:'',
        email:''
      },
      sizeOptions: [{
        value: '不限',
        label: '不限'
      }, {
        value: '10-99',
        label: '10-99'
      }, {
        value: '100-499',
        label: '100-499'
      }, {
        value: '500-999',
        label: '500-999'
      }, {
        value: '1000以上',
        label: '1000以上'
      }],
    };
  },
  methods: {
    login() {
      console.log(this.account)
      console.log(this.password)
      axios.get(`/api/loginAndRegister/login/${this.account}`).then(resp => {
        console.log(resp.data)
        if(this.account==="admin"&&this.password==="admin"){
          this.$router.push('/admin/auditCompanies');
        } else if (this.password==resp.data) {
          if (this.account.startsWith('company')) {
            this.$router.push('/company/companyInfo');
          } else {
            this.$router.push('/index');
          }
        } else {
          alert("账号或密码错误");
        }
      }).catch(error => {
        // 这里可以添加对请求出错情况的处理逻辑，比如打印错误信息等
        console.log(error);
        alert("登录请求出现错误，请稍后再试");
      });
    },
    registerUser() {
      console.log("666")
    },
    registerCompany() {
      // pubsub.publish("registerCompany", "");
      this.CompanyVisible=true;
    },
    onSubmit() {
      axios.post("/api/company/register", {
        name: this.form.name,
        size: this.form.size,
        license: this.form.license,
        brand: this.form.brand,
        description: this.form.description,
        email: this.form.email,
        status: 0
      })
          .then(response => {
            console.log(response.data);
            this.$alert(`${this.form.name}公司的注册消息已经提交,待审核`, '提示', {
              confirmButtonText: '确定',
              callback: () => {
                location.reload(); // 点击确定按钮后刷新页面
              }
            });
            this.CompanyVisible=false;
          })
          .catch(error => {
            console.error(error);
          });
    },
    handleSuccesslicence(resp) {
      this.form.license=resp;
      console.log(this.form.license);
    },
    handleSuccessbrand(resp) {
      this.form.brand=resp;
      console.log(this.form.brand);
      console.log("666")
    },
  },
};
</script>

<style scoped>

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.main {
  font-family: Verdana, serif;
  width: 100%;
  background: url("@/assets/login/images/banner.jpg") no-repeat fixed center;
  background-size: 100% 100%;
  /* 设置为绝对定位 */
  position: absolute;
  /* 距离顶部0距离 */
  top: 0;
  /* 距离底部0距离 */
  bottom: 0;
  /* 距离左边0距离 */
  left: 0;
  /* 距离右边0距离 */
  right: 0;
}
</style>
